<template>
    <div class="performanceQuery">
        <div class="search-wrap d-flex a-center">
            <div class="search-item d-flex a-center">
                <label>部门</label>
                <el-select
                    v-model="form.departmentId"
                    class="m-l5"
                    placeholder="请选择部门"
                >
                    <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button
                    @click="toPage"
                    class="button_edit m-r10"
                >
                    绩效目标设置
                </el-button>
                <el-button
                        class="button_edit"
                        @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                class="m-t20"
                index
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
            <template #mainProjectName="scope">
                <span>{{scope.$index + 1}}</span>
            </template>
        </public-table>
    </div>
</template>

<script setup>
import {ElDivider, ElMessage} from "element-plus";
import PublicTable from "@/components/PublicTable";
import {onMounted, reactive, ref} from "vue";
import {exportApi, fundManagementApi} from "@/api/businessFinance";
import {exportExcelFile, resetForm} from "@/common/utils/GlobalUtils";
import router from "@/router";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const tableData = ref([]);

const tableOption = ref([
    { label: "部门", prop: "departmentName" },
    { label: "名次 ", prop: "mainProjectName",slotName:'mainProjectName',slot:true },
    { label: "计划内得分 ", prop: "insidePlanScore" },
    { label: "计划外得分 ", prop: "outsidePlanScore" },
    { label: "总分", prop: "totalPlanScore" },
]);

const form = reactive({
    departmentId:''
});

const getFundBudgetExamineRecordVo = (param) => {
    fundManagementApi.getFundBudgetExamineRecordVo(param).then(res=>{
        tableData.value = res.data;
        page.total = res.data;
    });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        ...form,
        pageNum: page.current,
        pageSize: page.size
    };
    getFundBudgetExamineRecordVo(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size
    };
    getFundBudgetExamineRecordVo(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getFundBudgetExamineRecordVo(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
    exportApi.fundBudgetExamineRecordLeadingOut(form).then(res=>{
        if (res) {
            exportExcelFile(res,'资金绩效表');
        }
    });
}

const departmentList = ref([]);
const getDepartmentVo = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        departmentList.value = res.data;
    });
}

/**
 * 跳转资金预算绩效设置
 */
const toPage = () => {
    router.push({path:`/businessFinance/fundManagement/fundBudgetManagement/performanceSettings`});
}

onMounted(()=>{
    getFundBudgetExamineRecordVo({
        departmentId:'',
        pageNum:1,
        pageSize:10
    });
    getDepartmentVo();
});
</script>

<style lang="scss" scoped>
.performanceQuery{
  .search-wrap{
    .search-item{
      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
